<template>
	<div>
		<div id="filter_header" @click="filterShow = true">全部分类</div>
		<transition name="fade">
			<div id="filter_mask" v-show="filterShow" @click.stop = "filterShow = false">
				<div id="filter_options">
					<div id="filter_inner">
						<span v-for="(t,i) in typesName" :class="{active: type === i}"
							@click="clickType(i)">
							{{t}}
						</span>
					</div>
				</div>
			</div>
		</transition>
		<div style="margin-top:.9rem">
			<div v-for="(r,i) in revenueHistory.data">
				<div v-if="checkOfDifferentMonth(i, i-1)"  class="month p34">
					{{r.year}}年{{r.month}}月
				</div>
				<div class="item">
					<div class="fl">
						<p class="p32">{{typesName[r.type]}}</p>
						<p class="p28">{{utcToDate(r.created_at)}}</p>
					</div>
					<div class="fr p38">{{r.money}}</div>
				</div>
			</div>
		</div>
		<div class="nothing-tip" v-show="revenueHistory.noData">暂无任何数据</div>
		<div class="middle-loading-tip" v-show="revenueHistory.loading && page === 1">加载中…</div>
		<div class="bottom-loading-tip" v-show="revenueHistory.loading && page > 1">加载中…</div>
		<div class="all-loaded-tip" v-show="revenueHistory.allLoaded">加载完成</div>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { loadMore, utcToDate } from '@/assets/js/utils.js'
export default{
	name:'RevenueDetail',
	created(){
		this.getData()
		this.loadMore = new loadMore({cb: this.nextPage})
	},
	mounted(){
	},
	data(){
		return {
			page: 1,
			type: 0,
			typesName: ['全部', '分享收益', '余额支付','返现','分润'],
			filterShow: false,
			loadMore: ''
		}
	},
	computed:{
		...mapGetters({
			revenueHistory: 'revenueHistory'
		})
	},
	methods:{
		...mapActions(['getRevenueHistory']),
		utcToDate(timestamp){
			return utcToDate(timestamp)
		},
		checkOfDifferentMonth(i){
			if(!i) return true;
			else return this.revenueHistory.data[i].month !== this.revenueHistory.data[i - 1].month
		},
		clickType(i){
			this.type = i
			this.page = 1
			console.log('关闭下拉加载')
			this.loadMore.close()
			this.$store.commit('clearRevenueHistory')
			this.getData()
			this.filterShow = false
		},
		async nextPage(){
			this.page++
			await this.getData()
		},
		async getData(){
			await this.getRevenueHistory({type: this.type, page: this.page})
			this.loadMore.loading = false
			this.$nextTick(() => {
				if(document.body.scrollHeight > window.innerHeight && this.page == 1)
					this.loadMore.open()
				else if(this.revenueHistory.allLoaded)
					this.loadMore.close()
			})
		}
	}
}
</script>
<style lang='less' scoped>
#filter_header{
	background: url(../../assets/img/user/next.png) no-repeat 2rem;
	background-color: #fff;
	padding: .2rem .22rem;
	font-size: 0.43rem;
	position: fixed;
	top: 0;
	width: 100%;
}
#filter_mask{
	position: fixed;
	top: 1rem;
	left: 0;
	background: rgba(0,0,0,.4);
	width: 100%;
	height: 100%;
}
#filter_options{
	background: #fff;
	padding: .1rem .2rem 0.3rem;
}
#filter_inner {
    width: ~'calc(100% + .3rem)';
    span{
    	margin-top: .2rem;
    	display: inline-block;
    	margin-right: .2rem;
    	border: 1px solid #979797;
    	border-radius: 0.11rem;
    	color: #333;
    	font-size: 0.4rem;
    	padding: 0 .3rem;
    	height: .9rem;
    	line-height: .9rem;
    	&.active{
    		border-color: #fb4a4a;
    		color: #fb4a4a;
    	}
    }
}
.item{
	height: 1.93rem;
    padding: .3rem;
    border-bottom: 2px solid #dfdfdf;
    background: #fff;
    .p34{
    	color: #333;
    }
    .p28{
    	color: #999;
    	margin-top: .2rem;
    }
    .p38{
    	font-size: .51rem;
    	margin-top: .3rem;
    	color: #333;
    }
}
.month{
	height: 1rem;
    line-height: 1rem;
    color: #585858;
    padding: 0 .3rem;
}
</style>